<template>
  <div class="player-profile">
    <el-form :model="playerForm" label-width="120px">
      <el-form-item label="姓名">
        <el-input v-model="playerForm.name" />
      </el-form-item>

      <el-form-item label="年龄">
        <el-input-number v-model="playerForm.age" :min="16" :max="45" />
      </el-form-item>

      <el-form-item label="位置">
        <el-select v-model="playerForm.position">
          <el-option label="前锋" value="forward" />
          <el-option label="中场" value="midfielder" />
          <el-option label="后卫" value="defender" />
          <el-option label="门将" value="goalkeeper" />
        </el-select>
      </el-form-item>

      <el-form-item label="国籍">
        <el-input v-model="playerForm.nationality" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="saveProfile">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";

const props = defineProps({
  playerId: {
    type: Number,
    required: true,
  },
});

const playerForm = ref({
  name: "",
  age: 20,
  position: "",
  nationality: "",
});

const saveProfile = () => {
  // 这里添加保存逻辑
  ElMessage.success("保存成功");
};
</script>